<body>
藉由 data-attribute 自定義單位 data-sizing = "px"
藉由 name = base, spacing, blur
<style>
:root {
--base: #ffc600
--spacing:10px
--blur: 10px
}
img {
padding: var(--spacing)
background: var(--base)
filter: blur(var(--blur))
}
</style>
<script>
const inputs = document.querySelectorAll('.controls input')
function handleUpdate(){
const suffix = this.dataset.sizing || ''
document.documentElement.style.setProperty('--${this.name}', this.value + suffix)
}
inputs.forEach(i => i.addEventListener('change',handleUpdate))
//inputs.forEach(i => i.addEventListener('mousemove',handleUpdate))
</script>
React 官網教學 OOXX - component class + prop傳資料
PICOCTF2022 by John Hammond 看不懂XDD 可能再繼續找更合適的影片
看影片追技術